import React from 'react';
import moment from 'moment';
import { Input, Button, Select,Form, DatePicker, Row, Col,Modal,Icon,Table,Collapse,Radio,AutoComplete,InputNumber,message } from 'antd';
const FormItem = Form.Item;
import $ from 'jquery';
import config from '../../config/config';
import ajax from "../../common/ajax";
const allRouter=config.router;
const Option = Select.Option;
const Search = Input.Search;
const Panel = Collapse.Panel;
const { TextArea } = Input;
const medicineSpec=[
    {id:1,name:'g'},
    {id:2,name:'ml'},
    {id:3,name:'盒'},
    {id:4,name:'瓶'},
    {id:5,name:'袋'},
    {id:6,name:'支'},
];
//过敏源
let uuid = 0;
let descCount=0;
let data=[{index:1}]

//处方相关,增加药品
let uuid1=1;
let descCount1=1;

//增加整个处方
let uuid2=1;
let descCount2=1;



//外科治疗表格模拟数据
let showingData=[
    {index:1,name:'小儿推拿',times:3,price:30,spec:'次',allowDiscount:'是'}
];
let feePreview=[
    {index:1,name:'挂号费',times:1,price:30,spec:'g',discount:'0.8',doctorName:'妇科-华佗'}
];
class TreatPatients extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            selectedKey:1,//点击的tabKey
            tab1Status:false, // true 编辑状态   false 保存状态
            tab2Status:false, // true 编辑状态   false 保存状态
            tab3Status:false, // true 编辑状态   false 保存状态
            tabKey: 1,//当前显示的页面内容 1新增患者 2登记记录
            allergyExisted:0,//是否有过敏史
            visible: false,//完成就诊
            visible1: false,//费用预览
            visible2: false,//tab间切换模态框
            patientInfo:{},//该患者信息




            isChineseMedicine:1,
            medicalNameDataSource:['1','2','3'], //药品名称自动完成data
            allMedicineData:data,//处方表格所有数据
            surgeryData:showingData,//外科治疗表格所有数据
            feePreviewData:feePreview,

        }
    }
    componentWillMount() {
        //为了防止增加后立马编辑而uuid没有清0
        uuid = 0;
    }
    componentDidMount() {
        if(this.props.location.state){
            this.handleIrritability();
        }
    }
    /**********病例相关方法***********/

    //对过敏进行处理以及获取信息，设置信息
    handleIrritability(){
        if(this.props.location.state){
            let url=allRouter.patientOrigin+'/patient/one/'+this.props.location.state;
            ajax('get',url)
                .then(data=>{
                    console.log(data);
                    if(data.code===200){
                        if(!data.data.seedoctormes){
                            return;
                        }
                        let values=JSON.parse(data.data.seedoctormes.irritabilityDetails);
                        console.log('gsfjkgslfksdl;gj');
                        console.log(values);
                        if(!values){
                            return;
                        }
                        let count = values.length;
                        this.setState({
                            allergyExisted: 1
                        });
                        console.log(count);
                        for (let i = 1; i<count;i++){
                            this.add();
                        }
                        this.getThisPatientInfo(this.props.location.state)
                    }else{
                        console.log("获取出错");
                    }
                })
                .catch(err=>{
                    console.log(err);
                });
        }
    }
    // 获取该患者信息
    getThisPatientInfo(id){
        let url=allRouter.patientOrigin+'/patient/one/'+id;
        $.ajax({
            url:url,
            type: "get",
            async: true,
            success:data=>{
                console.log(data);
                if(data.code===200){
                    this.setState({
                        patientInfo:data.data
                    });

                    let values = data.data.seedoctormes;
                    if(!values){return;}
                    this.props.form.setFieldsValue({
                        illDate:values.seedoctortime?moment(values.seedoctortime):undefined,//发病日期
                        symptom:values.action, //主诉
                        medicalHistory:values.nowmedical ,  //现病史
                        oldMedicalHistory:values.historymedical ,  //既往史
                        allergy:values.irritability,  // 过敏史
                        personalHistory:values.personage ,    //个人史
                        familyHistory:values.family,   //家族史
                        preliminaryDiagnosis:values.tentative, //初步诊断
                        treatmentOpinion:values.treatmentoptions, // 治疗意见
                        pulse:data.data.signmes[0].pulse,//脉搏
                        breath:data.data.signmes[0].breathe,//呼吸
                        bloodPressure:data.data.signmes[0].bloodpressure,//血压
                    });
                    if(values.irritabilityDetails){
                        if(JSON.parse(values.irritabilityDetails).length){
                            let myObject={};
                            JSON.parse(values.irritabilityDetails).map((item,i)=>{
                                if(i>0){
                                    let v1='allergyOrigin1'+(i-1);
                                    let v2='allergyReact1'+(i-1);
                                    let v3='allergyProcess1'+(i-1);
                                    myObject[v1]=item.allergyOrigin?item.allergyOrigin:undefined;
                                    myObject[v2]=item.allergyReact?item.allergyReact:undefined;
                                    myObject[v3]=item.allergyProcess?item.allergyProcess:undefined;
                                }
                            });
                            this.props.form.setFieldsValue({
                                allergyOrigin1:JSON.parse(values.irritabilityDetails)[0].allergyOrigin,
                                allergyReact1:JSON.parse(values.irritabilityDetails)[0].allergyReact,
                                allergyProcess1:JSON.parse(values.irritabilityDetails)[0].allergyProcess,
                            });
                            console.log(myObject);
                            this.props.form.setFieldsValue(myObject);
                        }
                    }
                }else{
                    console.log("获取该患者信息出错");
                }
            },
            error:err=>{
                console.log(err);
            }
        })
    }
    //生日禁用
    disabledDate(val) {
        if (val) {
            return val.valueOf() > Date.now();
        } else {
            return false;
        }
    }
    //过敏史切换
    handleAllergyChange(e){
        console.log(e.target.value);
        if(e.target.value==='有') {
            this.setState({
                allergyExisted: 1
            })
        }else{
            this.setState({
                allergyExisted: 0
            })
        }
    }
    //移除过敏源
    remove (k){
        const { form } = this.props;
        const keys = form.getFieldValue('keys');
        if (keys.length === 0) {
            return;
        }
        descCount++;
        form.setFieldsValue({
            keys: keys.filter(key => key !== k),
        });
    }
    //增加过敏源
    add (){
        const { form } = this.props;
        const keys = form.getFieldValue('keys');
        const nextKeys = keys.concat(uuid);
        console.log(nextKeys);
        uuid++;
        form.setFieldsValue({
            keys: nextKeys,
        });
    }
    //保存就诊信息
    handleTriageSave(){
        this.props.form.validateFields((err, fieldsValue) => {
            console.log(err, fieldsValue);
            if(err){return;}
            //把状态调整为不可修改状态
            this.setState({
                tab1Status:true,
            });
            const values = {
                ...fieldsValue,
                'illDate': fieldsValue['illDate'].format('YYYY-MM-DD HH:MM'),
            };
            console.log(values);
            let irritabilityDetails = [];
            irritabilityDetails.push({allergyOrigin:values.allergyOrigin1,allergyReact:values.allergyReact1,allergyProcess:values.allergyReact1})
            values.keys.map(i=>{
                let v1='allergyOrigin1'+i;
                let v2='allergyReact1'+i;
                let v3='allergyProcess1'+i;
                values[v1]=fieldsValue[v1];
                values[v2]=fieldsValue[v2];
                values[v3]=fieldsValue[v3];
                irritabilityDetails.push({allergyOrigin:values[v1],allergyReact:values[v2],allergyProcess:values[v3]})
            });
            console.log(irritabilityDetails);
            let irritabilityDetails1=[];
            irritabilityDetails.map(item=>{
                if( JSON.stringify(item)!=='{}'){
                    irritabilityDetails1.push(item);
                }
            });
            let url=allRouter.patientOrigin+'/surgicalTreatment/treatmentInformation';
            $.ajax({
                url: url,
                type: "post",
                async: true,
                traditional: true,
                data: {
                    id:this.state.patientInfo._id,//患者id
                    data:JSON.stringify({
                        seedoctortime:values.illDate,//发病日期
                        action:values.symptom, //主诉
                        nowmedical:values.medicalHistory ,  //现病史
                        historymedical:values.oldMedicalHistory ,  //既往史
                        irritability:values.allergy,  // 过敏史
                        irritabilityDetails:irritabilityDetails1.join('') === ''?'':JSON.stringify(irritabilityDetails1),//过敏史详情
                        personage:values.personalHistory ,    //个人史
                        family:values.familyHistory,   //家族史
                        tentative:values.preliminaryDiagnosis, //初步诊断
                        treatmentoptions:values.treatmentOpinion, // 治疗意见
                    })
                },
                success:data => {
                    //  console.log(data);
                    if(data.code===200){
                        message.info('保存成功',);
                        this.setState({ tabKey: this.state.selectedKey })
                    } else{
                        message.info('保存失败');
                    }
                },
                error:err=>{
                    console.log(err);
                }
            });
            let url1 = allRouter.patientOrigin + '/patient/update';
            $.ajax({
                url: url1,
                type: "post",
                async: true,
                traditional: true,
                data: {
                    id: this.state.patientInfo._id,
                    signmes: JSON.stringify([{ height: this.state.patientInfo.signmes[0].height, weight: this.state.patientInfo.signmes[0].weight, pulse: values.pulse, breathe: values.breath, bloodpressure: values.bloodPressure }]),
                },
                success: data => {
                    console.log(data);
                    if (data.code === 200) {
                        console.log("患者详情修改成功");
                    } else {
                        console.log("患者详情修改失败");
                    }
                },
                error: err => {
                    console.log(err);
                }
            });
        })
    }
    // 编辑就诊信息
    handleTriageEdit(){
        uuid = 0;
        const { form } = this.props;
        form.setFieldsValue({
            keys: [],
        });
        this.setState({
            tab1Status:false,
        });
        this.handleIrritability();

    }
    //取消保存就诊信息
    handleCanclePatientInfo(){
        uuid = 0;
        const { form } = this.props;
        form.setFieldsValue({
            keys: [],
        });
        this.setState({
            tab1Status:true,
        });
        this.handleIrritability();
    }
    //处理文本输入框输入字符数  0/500
    handleChange(e){
        let myRef=e.target.getAttribute('data');
        let valueLen=e.target.value.length;
        console.log(valueLen);
        console.log(myRef);
        this.refs[myRef].innerHTML=valueLen+'/500';
    }


    //改变tab页面 切换登记记录与新增患者页面内容
    changeTab(key) {
        if(key===2){
            this.setState({
                tabKey:2,
            })
        }else{
            this.setState({
                visible2:true,
                selectedKey:key,
            })
        }
    }
    //tab切换模态框 保存 方法
    handleChangeTabOk(){
        if(this.state.tabKey === 1){
            this.props.form.validateFields((err, fieldsValue) => {
                if(err){
                    message.info('该页面缺少必填信息!请先填写必填信息！')
                    this.setState({
                        visible2:false,
                    });
                    return;
                }else{
                    this.handleTriageSave();
                    this.setState({
                        visible2:false,
                        tabKey:this.state.selectedKey
                    })
                }
            });
        }
        if(this.state.tabKey === 3){}
    }
    //tab切换模态框取消方法
    handleCance2(){
        this.setState({
            visible2:false,
        })
    }
    //tab切换模态框 不保存 方法
    handleChangeTabCancel(){
        this.setState({
            visible2:false,
            tabKey:this.state.selectedKey
        });
        if(this.state.selectedKey===1){
            this.handleIrritability();
            this.setState({
                tab1Status:false,
            })
        }
    }








    /**********处方相关方法***********/
    //是否是中药处方
    changeTab1(key) {
        this.setState({ isChineseMedicine: key })
    }
    //药品名称自动完成搜索处理事件
    handleSearch(){
        //向药房发送ajax请求，得到所有药品名称，赋值给this.state.medicalNameDataSource
    }
    //增加药品数据
    add1(){

        let datas=this.state.allMedicineData;
        uuid1++;
        console.log(datas);
        datas.push({index:uuid1,})
        this.setState({
            allMedicineData:datas
        })
    }
    //移除药品数据
    remove1 (k)  {
        let datas=this.state.allMedicineData;
        descCount1++;
        this.setState({
            allMedicineData: datas.filter(key => key.index !== k),
        });
    }
    //显示模态框，完成就诊
    triageComplete(){
        this.setState({
            visible:true
        })
    }
    //确定添加角色或编辑角色
    handleOk() {
        this.setState({
            visible:false
        })
    }
    //取消添加角色
    handleCancel() {
        this.setState({
            visible: false,
        });
    }
    //显示模态框，费用预览
    feePreview(){
        this.setState({
            visible1:true
        })
    }
    //确定添加角色或编辑角色
    handleOk1() {
        this.setState({
            visible1:false
        })
    }
    //取消添加角色
    handleCancel1() {
        this.setState({
            visible1: false,
        });
    }
    //增加中药处方
    add2  ()  {
        const { form } = this.props;
        const keys2 = form.getFieldValue('keys2');
        const nextKeys = keys2.concat(uuid2);
        console.log(nextKeys);
        uuid2++;
        form.setFieldsValue({
            keys2: nextKeys,
        });
    }
    //移除中药处方
    remove2 (k)  {
        const { form } = this.props;
        const keys2 = form.getFieldValue('keys2');
        if (keys2.length === 0) {
            return;
        }
        descCount2++;
        form.setFieldsValue({
            keys2: keys2.filter(key => key !== k),
        });
    }

    render(){
        const formItemLayout = { labelCol: { span: 2 }, wrapperCol: { span: 21 } };
        const formItemLayout1 = { labelCol: { span: 7 }, wrapperCol: { span: 17 } };
        const { getFieldDecorator,getFieldValue} = this.props.form;
        //过敏源增加或减少
        getFieldDecorator('keys', { initialValue: [] });
        const keys = getFieldValue('keys');
        //处方的表格
        const columns = [
            {
                title: '药品名称',
                dataIndex: 'name',
                width: 50,
                render: (text, record) => {
                    return (<FormItem {...formItemLayout}>
                        {getFieldDecorator('medicineName'+record.index,{
                            rules: [{ required: true, message: '请输入或选择药品' },
                                { max: 40, message: '最多不超过40字'}]
                        })(
                            <AutoComplete
                            dataSource={this.state.medicalNameDataSource}
                            style={{ width: 200 }}
                            onSearch={this.handleSearch}
                            placeholder="请输入药品名称"
                            />
                        )}
                    </FormItem>)
                },
            },{
                title: '剂量（次）',
                dataIndex: 'dose',
                width: 200,
                render: (text, record) => {
                    return (<FormItem {...formItemLayout}>
                        {getFieldDecorator('dose'+record.index,{
                            rules: [{ required: true, message: '请输入剂量' },]
                        })(
                            <InputNumber style={{width:'150px'}} min={0} placeholder="请输入大于0的数字"></InputNumber>
                        )}
                    </FormItem>)
                },
            },{
                title: '规格',
                dataIndex: 'spec',
                width: 100,
                render: (text, record) => {
                    return (<FormItem {...formItemLayout}>
                        {getFieldDecorator('spec'+record.index,{
                            rules: [{ required: true, message: '请选择规格' },]
                        })(
                            <Select style={{ width: "100px" }} placeholder="请选择规格">
                                {medicineSpec.map(item=>{
                                    return <Option key={item.id} value={item.name}>{item.name}</Option>
                                })}
                            </Select>
                        )}
                    </FormItem>)
                },
            },{
                title: '特殊要求',
                dataIndex: 'specialRequirements',
                width: 250,
                render: (text, record) => {
                    return (<FormItem {...formItemLayout}>
                        {getFieldDecorator('specialRequirements'+record.index,{
                            rules: [
                                {max:100,message:'最多输入100字'},
                                ]
                        })(
                            <Input placeholder="请输入特殊要求"/>
                        )}
                    </FormItem>)
                },
            },{
                title: '操作',
                width: 150,
                render: (text, record) => record.index==1?
                    <Button  onClick={this.add1.bind(this)} type="primary">
                        <Icon type="plus" />
                    </Button>:<Button  onClick={() => this.remove1(record.index)} type="primary">
                        <Icon type="minus" />
                    </Button>

            }
        ];
        //外科治疗表格
        const justShowingColumns = [
            {
                title: '服务名称',
                dataIndex: 'name',
                width: 200,
            },{
                title: '次数',
                dataIndex: 'times',
                width: 100,
            },{
                title: '单价',
                dataIndex: 'price',
                width: 100,
            },{
                title: '规格',
                dataIndex: 'spec',
                width: 100,
            },{
                title: '总额',
                width: 250,
                render:(text,record)=><span>{record.price*record.times}</span>
            },{
                title: '是否允许折扣',
                dataIndex: 'allowDiscount',
                width: 250,
            },{
                title: '操作',
                width: 150,
                render: (text) =>'----'
            }
        ];
        //费用预览表格
        const FeePreview = [
            {
                title: '收费名称',
                dataIndex: 'name',
                width: 200,
            },{
                title: '数量',
                dataIndex: 'times',
                width: 100,
            },{
                title: '单价',
                dataIndex: 'price',
                width: 100,
            },{
                title: '规格',
                dataIndex: 'spec',
                width: 100,
            },{
                title: '金额',
                width: 250,
                render:(text,record)=><span>￥{record.price*record.times}</span>
            },{
                title: '折扣',
                dataIndex: 'discount',
                width: 250,
            },{
                title: '折后金额',
                width: 250,
                render:(text,record)=><span>￥{record.price*record.times*record.discount}</span>
            },{
                title: '接诊医生',
                width: 150,
                dataIndex: 'doctorName',
            }
        ];
        //过敏
        const formItems = keys.map((k, index) => {
            return(
                <Row key={index}>
                    <Col span={5} offset={2}>
                        <FormItem {...formItemLayout} label="">
                            {getFieldDecorator('allergyOrigin1'+k,{
                                rules:[
                                    {max:50,message:'最多不超过50字'}
                                ]
                            })(
                                <Input disabled={this.state.tab1Status} placeholder="过敏源"/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={5} offset={1}>
                        <FormItem {...formItemLayout}>
                            {getFieldDecorator('allergyReact1'+k,{
                                rules:[
                                    {max:50,message:'最多不超过50字'}
                                ]
                            })(
                                <Input disabled={this.state.tab1Status} placeholder="过敏反应"/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={5} offset={1}>
                        <FormItem {...formItemLayout}>
                            {getFieldDecorator('allergyProcess1'+k,{
                                rules:[
                                    {max:10,message:'最多不超过10字'}
                                ]
                            })(
                                <Input disabled={this.state.tab1Status} placeholder="过敏程度"/>
                            )}
                        </FormItem>
                    </Col>
                    {keys.length > 0 ? (
                        <Col span={5}>
                            <Button onClick={() => this.remove(k)} type="primary" disabled={this.state.tab1Status}>
                                <Icon type="minus" />
                            </Button>
                        </Col>
                    ) : null}
                </Row>
            )
        })
        //增加整个中药处方
        getFieldDecorator('keys2', { initialValue: []});
        const keys2 = getFieldValue('keys2');
        const formItems2 = keys2.map((k,index) => {
            return(
                <div key={index} style={{marginTop:'50px'}}>
                    <Row>
                        <Col span={24}>
                            <FormItem {...formItemLayout} label=" 药方名称"  >
                                {getFieldDecorator('prescriptionName'+k,{
                                    rules: [{ required: true, message: '请填写药方名称' },
                                        { max: 40, message: '最多不超过40字'}]
                                })(
                                    <Input placeholder="请输入药方名称"/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row style={{marginTop:'30px'}}>
                        <Col span={2} style={{color:'black',marginLeft:'3%'}} ><span style={{color:'red',fontSize:'18px'}}>*</span>用药/用量：</Col>
                    </Row>
                    <Row>
                        <Col span={21} offset={2}>
                            <Table
                                rowKey="index"
                                columns={columns}
                                dataSource={this.state.allMedicineData}
                                pagination={false}
                                bordered
                            />
                        </Col>
                    </Row>
                    <Row style={{marginTop:'30px'}}>
                        <Col span={4} offset={5}>
                            <FormItem {...formItemLayout1} label="用法"  >
                                {getFieldDecorator('wayOfUse'+k,{
                                    rules: [
                                        { max: 40, message: '最多不超过40字'}]
                                })(
                                    <Input placeholder="请输入用法"/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={5}>
                            <FormItem {...formItemLayout1} label="频次"  >
                                {getFieldDecorator('howLong'+k,{
                                    rules: [
                                        { max: 40, message: '最多不超过40字'}]
                                })(
                                    <Input placeholder="请输入频次"/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={5}>
                            <FormItem {...formItemLayout1} label="服用天数"  >
                                {getFieldDecorator('daysOfUse'+k,{
                                    rules: [
                                        { max: 40, message: '最多不超过40字'}]
                                })(
                                    <Input placeholder="请输入服用天数" addonAfter='天'/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={5}>
                            <FormItem {...formItemLayout1} label="取药方式"  >
                                {getFieldDecorator('wayOfGet'+k,{
                                })(
                                    <Select placeholder="请选择取药方式" style={{ width: "150px" }}>
                                        <Option value="代煎">代煎</Option>
                                        <Option value="药店自取">药店自取</Option>
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    {keys2.length > 0 ? (
                        <Row style={{marginTop:'20px'}}>
                            <Col span={2} offset={21}>
                                <Button onClick={() => this.remove2(k)} type="danger">
                                    删除此处方
                                </Button>
                            </Col>
                        </Row>
                    ) : null}
                </div>
            )
        })
        const {patientInfo}=this.state;
        return (
            <div className='container triage'>
                <div className='btnBox'>
                    <Button type={this.state.tabKey === 1 ? 'primary':''} onClick={() => this.changeTab(1)}>病例</Button>
                    <Button type={this.state.tabKey === 2 ? 'primary':''} disabled onClick={() => this.changeTab(2)}>处方</Button>
                    <Button type={this.state.tabKey === 3 ? 'primary':''} onClick={() => this.changeTab(3)}>外科治疗</Button>
                </div>
                <div className='box'>
                    <div className='patientinfo'>
                        <img src={require('../../../images/default.png')}/>
                        <h6>{patientInfo.username}</h6>
                        <p>{patientInfo.userphone}</p>
                        <div className='patientinfoa'>
                            <p>性别：{patientInfo.usersex}</p>
                            <p>年龄：{(new Date().getFullYear()- (patientInfo.userbirthday?patientInfo.userbirthday.slice(0,4):1))+'岁'}</p>
                            <p>婚配：{patientInfo.usermarriage}</p>
                            <p>身高：{patientInfo.signmes?patientInfo.signmes[0].height===0?'':patientInfo.signmes[0].height+'cm':''}</p>
                            <p>脉搏：{patientInfo.signmes?patientInfo.signmes[0].pulse===0?'':patientInfo.signmes[0].pulse:''}</p>
                            <p>呼吸：{patientInfo.signmes?patientInfo.signmes[0].breathe===0?'':patientInfo.signmes[0].breathe:''}</p>
                            <p>血压：{patientInfo.signmes?patientInfo.signmes[0].bloodpressure===0?'':patientInfo.signmes[0].bloodpressure:''}</p>
                            <p>过敏史：{patientInfo.seedoctormes?patientInfo.seedoctormes.irritability:''}</p>
                        </div>
                    </div>
                    <div className='patientinfo1 treat-patient'>
                        {
                            this.state.tabKey === 1 ?
                                <div className='addpatient'>
                                    <div className='bxa'>
                                        <div className='addpatient1'>
                                            <p>医生接诊</p>
                                            <Button icon="desktop"  onClick={this.feePreview.bind(this)}>费用预览</Button>
                                            <Button type="primary" style={{marginRight:'20px'}} onClick={this.triageComplete.bind(this)}>完成就诊</Button>
                                        </div>
                                        <div style={{paddingTop:'20px'}} className="treat-patient-content">
                                            <Row>
                                                <Col span={24} className="treat-patient-first-form">
                                                    <FormItem {...formItemLayout} label="发病日期"  >
                                                        {getFieldDecorator('illDate',{
                                                            rules: [{ required: true, message: '请选择发病日期' }]
                                                        })(
                                                            <DatePicker  disabled={this.state.tab1Status} format="YYYY-MM-DD HH:mm"  showTime={{ defaultValue: moment('00:00:', 'HH:mm') }} disabledDate={(val) => this.disabledDate(val)} style={{ width: '100%' }}/>
                                                        )}
                                                    </FormItem>
                                                </Col>
                                            </Row>
                                            <Row>
                                                <Col span={24}>
                                                    <FormItem {...formItemLayout} label="主诉"  className="my-clear-fix">
                                                        {getFieldDecorator('symptom',{
                                                            rules: [{ required: true, message: '请填写主诉' },
                                                                    { max: 500, message: '最多不超过500字' }]
                                                        })(
                                                            <TextArea disabled={this.state.tab1Status} data='a' placeholder="请输入主诉" autosize={{ minRows: 1, maxRows: 6 }}  onChange={this.handleChange.bind(this)}/>
                                                        )}
                                                        <div className="my-clear-fix" style={{float:'right'}}>
                                                            <span style={{float:'right'}} ref="a">0/500</span>
                                                        </div>
                                                    </FormItem>
                                                </Col>
                                            </Row>
                                            <Row>
                                                <Col span={24}>
                                                    <FormItem {...formItemLayout} label="现病史"  className="my-clear-fix">
                                                        {getFieldDecorator('medicalHistory',{
                                                            rules: [{ max: 500, message: '最多不超过500字' }]
                                                        })(
                                                            <TextArea disabled={this.state.tab1Status} data='b' placeholder="请输入现病史" autosize={{ minRows: 1, maxRows: 6 }} onChange={this.handleChange.bind(this)}/>
                                                        )}
                                                        <div className="my-clear-fix" style={{float:'right'}}>
                                                            <span style={{float:'right'}} ref="b">0/500</span>
                                                        </div>
                                                    </FormItem>
                                                </Col>
                                            </Row>
                                            <Row>
                                                <Col span={24}>
                                                    <FormItem {...formItemLayout} label="既往史" className="my-clear-fix">
                                                        {getFieldDecorator('oldMedicalHistory',{
                                                            rules: [{ max: 500, message: '最多不超过500字' }]
                                                        })(
                                                            <TextArea disabled={this.state.tab1Status} data='c' placeholder="请输入既往史" autosize={{ minRows: 1, maxRows: 6 }} onChange={this.handleChange.bind(this)}/>
                                                        )}
                                                        <div className="my-clear-fix" style={{float:'right'}}>
                                                            <span style={{float:'right'}} ref="c">0/500</span>
                                                        </div>
                                                    </FormItem>
                                                </Col>
                                            </Row>
                                            <Row>
                                                <Col span="24">
                                                    <FormItem {...formItemLayout} label="过敏史">
                                                        {getFieldDecorator('allergy', {
                                                            initialValue: '无',
                                                        })(
                                                            <Radio.Group onChange={this.handleAllergyChange.bind(this)} disabled={this.state.tab1Status}>
                                                                <Radio value="无">无</Radio>
                                                                <Radio value="有">有</Radio>
                                                            </Radio.Group>
                                                        )}
                                                    </FormItem>
                                                </Col>
                                            </Row>
                                            {this.state.allergyExisted===1?<div>
                                                    <Row>
                                                        <Col span={5} offset={2}>
                                                            <FormItem {...formItemLayout} label="">
                                                                {getFieldDecorator('allergyOrigin1',{
                                                                    rules:[
                                                                        {max:50,message:'最多不超过50字'}
                                                                    ]
                                                                })(
                                                                    <Input disabled={this.state.tab1Status} placeholder="过敏源"/>
                                                                )}
                                                            </FormItem>
                                                        </Col>
                                                        <Col span={5} offset={1}>
                                                            <FormItem {...formItemLayout}>
                                                                {getFieldDecorator('allergyReact1',{
                                                                    rules:[
                                                                        {max:50,message:'最多不超过50字'}
                                                                    ]
                                                                })(
                                                                    <Input disabled={this.state.tab1Status} placeholder="过敏反应"/>
                                                                )}
                                                            </FormItem>
                                                        </Col>
                                                        <Col span={5} offset={1}>
                                                            <FormItem {...formItemLayout}>
                                                                {getFieldDecorator('allergyProcess1',{
                                                                    rules:[
                                                                        {max:10,message:'最多不超过10字'}
                                                                    ]
                                                                })(
                                                                    <Input disabled={this.state.tab1Status} placeholder="过敏程度"/>
                                                                )}
                                                            </FormItem>
                                                        </Col>
                                                        <Col span={5}>
                                                            <Button  disabled={this.state.tab1Status} onClick={this.add.bind(this)} type="primary">
                                                                <Icon type="plus" />
                                                            </Button>
                                                        </Col>
                                                    </Row>
                                                    {formItems}
                                                </div> :''}
                                            <Row>
                                                <Col span={24}>
                                                    <FormItem {...formItemLayout} label="个人史"  className="my-clear-fix">
                                                        {getFieldDecorator('personalHistory',{
                                                            rules: [{ max: 500, message: '最多不超过500字' }]
                                                        })(
                                                            <TextArea disabled={this.state.tab1Status} placeholder="请输入个人史" data='d' autosize={{ minRows: 1, maxRows: 6 }} onChange={this.handleChange.bind(this)}/>
                                                        )}
                                                        <div className="my-clear-fix" style={{float:'right'}}>
                                                            <span style={{float:'right'}} ref="d">0/500</span>
                                                        </div>
                                                    </FormItem>
                                                </Col>
                                            </Row>
                                            <Row>
                                                <Col span={24}>
                                                    <FormItem {...formItemLayout} label="家族史"  className="my-clear-fix">
                                                        {getFieldDecorator('familyHistory',{
                                                            rules: [{ max: 500, message: '最多不超过500字' }]
                                                        })(
                                                            <TextArea disabled={this.state.tab1Status}  placeholder="请输入家族史" data='e' autosize={{ minRows: 1, maxRows: 6 }} onChange={this.handleChange.bind(this)}/>
                                                        )}
                                                        <div className="my-clear-fix" style={{float:'right'}}>
                                                            <span style={{float:'right'}} ref="e">0/500</span>
                                                        </div>
                                                    </FormItem>
                                                </Col>
                                            </Row>
                                            <Row>
                                                <Col span={7}>
                                                    <FormItem {...formItemLayout1} label="脉搏"  >
                                                        {getFieldDecorator('pulse',{
                                                            rules:[
                                                                {pattern:/^\d{2,3}$/,message:'请输入2~3位数字'}
                                                            ]
                                                        })(
                                                           <Input  disabled={this.state.tab1Status} addonAfter="次/分钟" placeholder="请输入脉搏次数"/>
                                                        )}
                                                    </FormItem>
                                                </Col>
                                                <Col span={7}>
                                                    <FormItem {...formItemLayout1} label="呼吸"  >
                                                        {getFieldDecorator('breath',{
                                                            rules:[
                                                                {pattern:/^\d{2,3}$/,message:'请输入2~3位数字'}
                                                            ]
                                                        })(
                                                            <Input disabled={this.state.tab1Status} addonAfter="次/分钟" placeholder="请输入呼吸次数"/>
                                                        )}
                                                    </FormItem>
                                                </Col>
                                                <Col span={7}>
                                                    <FormItem {...formItemLayout1} label="血压"  >
                                                        {getFieldDecorator('bloodPressure',{
                                                            rules:[
                                                                {pattern:/^\d{2,3}$/,message:'请输入2~3位数字'}
                                                            ]
                                                        })(
                                                            <Input disabled={this.state.tab1Status} addonAfter="mmHg" placeholder="请输入血压"/>
                                                        )}
                                                    </FormItem>
                                                </Col>
                                            </Row>
                                            <Row>
                                                <Col span={24}>
                                                    <FormItem {...formItemLayout} label="初步诊断"  className="my-clear-fix">
                                                        {getFieldDecorator('preliminaryDiagnosis',{
                                                            rules: [{ required: true, message: '请填写初步诊断' },
                                                                { max: 500, message: '最多不超过500字' }]
                                                        })(
                                                            <TextArea disabled={this.state.tab1Status} placeholder="请输入初步诊断" data='f' autosize={{ minRows: 1, maxRows: 6 }} onChange={this.handleChange.bind(this)}/>
                                                        )}
                                                        <div className="my-clear-fix" style={{float:'right'}}>
                                                            <span style={{float:'right'}} ref="f">0/500</span>
                                                        </div>
                                                    </FormItem>
                                                </Col>
                                            </Row>
                                            <Row>
                                                <Col span={24}>
                                                    <FormItem {...formItemLayout} label="治疗意见"  className="my-clear-fix">
                                                        {getFieldDecorator('treatmentOpinion',{
                                                            rules: [{ required: true, message: '请填写治疗意见' },
                                                                { max: 500, message: '最多不超过500字' }]
                                                        })(
                                                            <TextArea disabled={this.state.tab1Status} placeholder="请输入治疗意见" data='g' autosize={{ minRows: 1, maxRows: 6 }} onChange={this.handleChange.bind(this)}/>
                                                        )}
                                                        <div className="my-clear-fix" style={{float:'right'}}>
                                                            <span style={{float:'right'}} ref="g">0/500</span>
                                                        </div>
                                                    </FormItem>
                                                </Col>
                                            </Row>
                                            <Row style={{marginBottom:'20px'}}>
                                                <Col span={2} offset={2}>
                                                    {this.state.tab1Status===false?<Button type="primary" onClick={this.handleTriageSave.bind(this)}>保存</Button>:<Button type="primary" onClick={this.handleTriageEdit.bind(this)}>编辑</Button>}
                                                </Col>
                                                <Col span={2}>
                                                    <Button onClick={this.handleCanclePatientInfo.bind(this)}>取消</Button>
                                                </Col>
                                                <Col span={2} offset={16}>
                                                    <Button>打印</Button>
                                                </Col>
                                            </Row>
                                        </div>
                                    </div>
                                </div>
                                :
                                this.state.tabKey === 2 ?
                                    <div className='addpatient'>
                                        <div className='bxa'>
                                            <div className='addpatient1'>
                                                <p>医生接诊</p>
                                                <Button icon="desktop"  onClick={this.feePreview.bind(this)}>费用预览</Button>
                                                <Button type="primary" style={{marginRight:'20px'}} onClick={this.triageComplete.bind(this)}>完成就诊</Button>
                                            </div>
                                            <div style={{paddingTop:'20px'}} className="treat-patient-content">
                                                <div>
                                                    <div className='btnBox'>
                                                        <Row>
                                                            <Col span={20} offset={2}>
                                                                <Button type={this.state.isChineseMedicine == 1 ? 'primary':''} onClick={() => this.changeTab1(1)}>中药处方</Button>
                                                                <Button icon='plus' onClick={this.add2.bind(this)}>增加中药处方</Button>
                                                                <Button style={{marginLeft:'20px'}} type={this.state.isChineseMedicine == 0 ? 'primary':''} onClick={() => this.changeTab1(0)}>西药处方</Button>
                                                                <Button icon='plus'>增加西药处方</Button>
                                                            </Col>
                                                        </Row>
                                                    </div>
                                                </div>
                                                {this.state.isChineseMedicine == 1 ?
                                                    <div>
                                                        <Row>
                                                            <Col span={24}>
                                                                <FormItem {...formItemLayout} label=" 药方名称"  >
                                                                    {getFieldDecorator('prescriptionName',{
                                                                        rules: [{ required: true, message: '请填写药方名称' },
                                                                            { max: 40, message: '最多不超过40字'}]
                                                                    })(
                                                                        <Input placeholder="请输入药方名称"/>
                                                                    )}
                                                                </FormItem>
                                                            </Col>
                                                        </Row>
                                                        <Row style={{marginTop:'30px'}}>
                                                            <Col span={2} style={{color:'black',marginLeft:'3%'}} ><span style={{color:'red',fontSize:'18px'}}>*</span>用药/用量：</Col>
                                                        </Row>
                                                        <Row>
                                                            <Col span={21} offset={2}>
                                                                <Table
                                                                    rowKey="index"
                                                                    columns={columns}
                                                                    dataSource={this.state.allMedicineData}
                                                                    pagination={false}
                                                                    bordered
                                                                />
                                                            </Col>
                                                        </Row>
                                                        <Row style={{marginTop:'30px'}}>
                                                        <Col span={4} offset={5}>
                                                            <FormItem {...formItemLayout1} label="用法"  >
                                                                {getFieldDecorator('wayOfUse',{
                                                                    rules: [
                                                                        { max: 40, message: '最多不超过40字'}]
                                                                })(
                                                                    <Input placeholder="请输入用法"/>
                                                                )}
                                                            </FormItem>
                                                        </Col>
                                                        <Col span={5}>
                                                            <FormItem {...formItemLayout1} label="频次"  >
                                                                {getFieldDecorator('howLong',{
                                                                    rules: [
                                                                        { max: 40, message: '最多不超过40字'}]
                                                                })(
                                                                    <Input placeholder="请输入频次"/>
                                                                )}
                                                            </FormItem>
                                                        </Col>
                                                        <Col span={5}>
                                                            <FormItem {...formItemLayout1} label="服用天数"  >
                                                                {getFieldDecorator('daysOfUse',{
                                                                    rules: [
                                                                        { max: 40, message: '最多不超过40字'}]
                                                                })(
                                                                    <Input placeholder="请输入服用天数" addonAfter='天'/>
                                                                )}
                                                            </FormItem>
                                                        </Col>
                                                        <Col span={5}>
                                                            <FormItem {...formItemLayout1} label="取药方式"  >
                                                                {getFieldDecorator('wayOfGet',{
                                                                })(
                                                                    <Select placeholder="请选择取药方式" style={{ width: "150px" }}>
                                                                        <Option value="代煎">代煎</Option>
                                                                        <Option value="药店自取">药店自取</Option>
                                                                    </Select>
                                                                )}
                                                            </FormItem>
                                                        </Col>
                                                    </Row>
                                                        {formItems2}
                                                        <Row style={{marginBottom:'20px',marginTop:'30px'}}>
                                                            <Col span={2} offset={2}>
                                                                <Button type="primary">保存</Button>
                                                            </Col>
                                                            <Col span={2}>
                                                                <Button>取消</Button>
                                                            </Col>
                                                            <Col span={2} offset={16}>
                                                                <Button>打印</Button>
                                                            </Col>
                                                        </Row>
                                                    </div>: <div>
                                                        <Row>
                                                            <Col span={21} offset={2}>
                                                                <Table
                                                                    rowKey="index"
                                                                    columns={columns}
                                                                    dataSource={this.state.allMedicineData}
                                                                    pagination={false}
                                                                    bordered
                                                                />
                                                            </Col>
                                                        </Row>
                                                        <Row style={{marginTop:'30px'}}>
                                                            <Col span={4} offset={5}>
                                                                <FormItem {...formItemLayout1} label="用法"  >
                                                                    {getFieldDecorator('wayOfUse',{
                                                                        rules: [
                                                                            { max: 40, message: '最多不超过40字'}]
                                                                    })(
                                                                        <Input placeholder="请输入用法"/>
                                                                    )}
                                                                </FormItem>
                                                            </Col>
                                                            <Col span={5}>
                                                                <FormItem {...formItemLayout1} label="频次"  >
                                                                    {getFieldDecorator('howLong',{
                                                                        rules: [
                                                                            { max: 40, message: '最多不超过40字'}]
                                                                    })(
                                                                        <Input placeholder="请输入频次"/>
                                                                    )}
                                                                </FormItem>
                                                            </Col>
                                                            <Col span={5}>
                                                                <FormItem {...formItemLayout1} label="服用天数"  >
                                                                    {getFieldDecorator('daysOfUse',{
                                                                        rules: [
                                                                            { max: 40, message: '最多不超过40字'}]
                                                                    })(
                                                                        <Input placeholder="请输入服用天数" addonAfter='天'/>
                                                                    )}
                                                                </FormItem>
                                                            </Col>
                                                            <Col span={5}>
                                                                <FormItem {...formItemLayout1} label="取药方式"  >
                                                                    {getFieldDecorator('wayOfGet',{
                                                                    })(
                                                                        <Select placeholder="请选择取药方式" style={{ width: "150px" }}>
                                                                            <Option value="代煎">代煎</Option>
                                                                            <Option value="药店自取">药店自取</Option>
                                                                        </Select>
                                                                    )}
                                                                </FormItem>
                                                            </Col>
                                                        </Row>
                                                        <Row style={{marginBottom:'20px',marginTop:'30px'}}>
                                                            <Col span={2} offset={2}>
                                                                <Button type="primary">保存</Button>
                                                            </Col>
                                                            <Col span={2}>
                                                                <Button>取消</Button>
                                                            </Col>
                                                            <Col span={2} offset={16}>
                                                                <Button>打印</Button>
                                                            </Col>
                                                        </Row>
                                                    </div>}
                                            </div>
                                        </div>
                                    </div>
                                    : <div className='addpatient'>
                                        <div className='bxa'>
                                            <div className='addpatient1'>
                                                <p>外科治疗</p>
                                                <Button icon="desktop" onClick={this.feePreview.bind(this)}>费用预览</Button>
                                                <Button type="primary" style={{marginRight:'20px'}} onClick={this.triageComplete.bind(this)}>完成就诊</Button>
                                            </div>
                                            <div style={{paddingTop:'20px'}} className="treat-patient-content">
                                                <Row>
                                                    <Col span={24} offset={1}>用药/用量：</Col>
                                                </Row>
                                                <Row>
                                                    <Col span={21} offset={1}>
                                                        <Table
                                                            rowKey="index"
                                                            columns={justShowingColumns}
                                                            dataSource={this.state.surgeryData}
                                                            pagination={false}
                                                            bordered
                                                        />
                                                    </Col>
                                                </Row>
                                                <Row style={{margin:'30px 0 20px 0'}}>
                                                    <Col span={2} offset={20}>
                                                        <Button>打印</Button>
                                                    </Col>
                                                </Row>
                                            </div>
                                        </div>
                                    </div>
                        }
                    </div>
                </div>
                {/*tabKey间的切换显示的模态框*/}
                <Modal
                    title='系统提示'
                    visible={this.state.visible2}
                    onCancel={this.handleCance2.bind(this)}
                    footer={null}
                >
                    <p style={{textAlign:'center'}}>您填写的内容已修改，是否需要保存?</p>
                    <Row style={{borderTop:'1px solid #ddd',}}>
                        <Col span={6} offset={18} style={{marginTop:'40px'}}>
                            <Button type="primary" style={{marginRight:'20px'}} onClick={this.handleChangeTabOk.bind(this)}>保存</Button>
                            <Button type="danger" style={{marginRight:'20px'}} onClick={this.handleChangeTabCancel.bind(this)}>不保存</Button>
                            <Button onClick={this.handleCance2.bind(this)}>取消</Button>
                        </Col>
                    </Row>
                </Modal>
                {/*完成就诊*/}
                <Modal
                    title='完成就诊'
                    visible={this.state.visible}
                    onOk={this.handleOk.bind(this)}
                    onCancel={this.handleCancel.bind(this)}
                >
                  <p style={{textAlign:'center'}}>本次的诊疗费为：<span style={{fontSize:'24px',fontWeight:'bold',color:'red'}}>￥70:00</span></p>
                </Modal>
                {/*费用预览*/}
                <Modal
                    title='费用预览'
                    visible={this.state.visible1}
                    onOk={this.handleOk1.bind(this)}
                    onCancel={this.handleCancel1.bind(this)}
                    className='spgl2-4-1'
                >
                    <div>
                        <Row>
                            <Col span={24} >
                                <Table
                                    rowKey="index"
                                    columns={FeePreview}
                                    dataSource={this.state.feePreviewData}
                                    pagination={false}
                                    bordered
                                />
                            </Col>
                        </Row>
                        <Row style={{marginTop:'20px'}}>
                            <Col span={2} offset={18}>金额合计:</Col>
                            <Col span={2} style={{color:'red'}}>￥465.00</Col>
                        </Row>
                        <Row>
                            <Col span={2} offset={18}>折扣金额:</Col>
                            <Col span={2} style={{color:'red'}}>￥50.00</Col>
                        </Row>
                        <Row>
                            <Col span={2} offset={18}>应收金额:</Col>
                            <Col span={2} style={{color:'red'}}>￥415.00</Col>
                        </Row>
                    </div>
                </Modal>
            </div>
        );
    }
}
const TreatPatientsForm = Form.create()(TreatPatients);
export default TreatPatientsForm;